<template>
  <div style="width: 70%">
    <el-table :data="tableData" style="width: 100%" max-height="600px">
      <el-table-column prop="id" label="id" width="60" sortable>
      </el-table-column>
      <el-table-column prop="name" label="名字"> </el-table-column>
      <el-table-column prop="category.name" label="分类" width="70">
      </el-table-column>

      <el-table-column prop="coverImage" label="图片" width="100">
        <template slot-scope="scope">
          <img
            :src="scope.row.coverImage"
            width="100"
            height="100"
            style="object-fit: cover"
            class="head_pic"
          />
        </template>
      </el-table-column>

      <el-table-column prop="desc" label="介绍" width="550"> </el-table-column>
      <el-table-column prop="playUrl" label="播放地址" width="100">
      </el-table-column>
      <el-table-column prop="views" label="浏览次数" width="50">
      </el-table-column>
      <el-table-column fixed="right" label="操作">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.$index, scope.row)"
            >编辑</el-button
          >
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <div class="block">
      <el-pagination
        background
        @current-change="handleCurrentChange"
        :page-size="10"
        layout="prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
  </div>
</template>
<style  scoped>
.el-button + .el-button {
  margin: 0.1rem 0;
}
</style>

<script>
import { getVideoData, removeVideoData } from "@/server/server.js";
export default {
  data() {
    return {
      tableData: [
        {
          name: "加载中",
          province: "加载中",
          city: "加载中",
          address: "加载中",
          zip: "加载中",
        },
      ],
      total: 50,
    };
  },
  computed: {},
  methods: {
    async handleCurrentChange(val) {
      //根据页数换页
      const data = await getVideoData({ page: val, ...this.$route.query });
      this.tableData = data.list; //更新列表
      this.total = data.totals; //更新总数
      // console.log(`当前页: ${val}`);
    },
    handleDelete(index, row) {
      console.log(removeVideoData);
      console.log(index);
      console.log(row);
      console.log(removeVideoData);
      removeVideoData(row.id)
        .then((result) => {
          console.log(result);
          this.initDate(); //更新数据
        })
        .catch((err) => {
          console.log(err);
        });
    },
    handleEdit(index, row) {
      this.$router.push({
        name: "EditVideo",
        query: {
          ID: row.id,
        },
      });
    },
    async initDate() {
      // if (this.$route.query.id) {
      // }
      const data = await getVideoData({ ...this.$route.query });
      console.log(data);
      this.tableData = data.list; //更新列表
      this.total = data.totals; //更新总数
    },
  },
  async created() {
    this.initDate(); //初始化数据
  },
};
</script>